<template>
	<div id="app">
		<h2>state的reactiveField属性:{{state.reactiveField}}</h2>
		<h2>state2经过toRefs转换:{{reactiveField}}</h2>
		<h2>state3经过toRefs转换:{{reactiveField}}</h2>
	</div>
</template>

<script>
	// 1、toRefs 可以把 reactive 声明的变量转成 ref 声明的变量
	// 2、如果转换内的key值相同 后面的会覆盖前面的
	// 3、toRefs 要开始就就从 vue引入
	// 4、总结:toRefs函数 能将reactive创建的响应式对象，转化成为普通的对象，并且这个对象上的每个节点，都是ref()类型的响应式数据。
	import { ref, reactive,toRefs } from 'vue'
	export default {
		name: 'app',
		data() {
			return {}
		},
		setup() {
			let state = reactive({
				reactiveField: 1,
				a: [{
					a: 1
				}]
			})
			let state2 = reactive({
				reactiveField: 2,
				a: [{
					a: 2
				}]
			})	
			let state3 = reactive({
				reactiveField: 3,
				a: [{
					a: 3
				}]
			})				
			return {
				state,
				...toRefs(state2),
				...toRefs(state3)
			}
		}
	}
</script>